<template>
    <el-tabs model-value="cms">
        <el-tab-pane label="内容设置" name="cms">
            <div class="cms_box">
                <div>
                    <div class="d_flex flex_ai_c mb10">
                        <label>分类</label>
                        <article-cate-select v-model="component.info.config.cate_id" first="all" @change="cateChange" />
                    </div>
                    <div class="d_flex flex_ai_c">
                        <label>展示数量</label>
                        <mi-input-number v-model="component.info.config.num" />
                    </div>
                </div>
<!--                <div class="d_flex flex_jc_c">-->
<!--                    <el-button type="primary" @click="addLi">添加元素</el-button>-->
<!--                </div>-->
            </div>
        </el-tab-pane>
        <el-tab-pane label="样式设置" name="style">
            <el-form label-width="90px" class="style_box">
                <el-form-item label="图片样式">
                    <mi-radio v-model="component.info.class.radius"
                              :options="[{id:'right', title:'直角'}, {id:'fillet', title:'圆角'}, {id:'circle', title:'圆形'}]" />
                </el-form-item>
                <el-form-item label="下边距">
                    <el-row :gutter="10">
                        <el-col :span="16">
                            <el-slider v-model="component.info.style.margin_bottom" />
                        </el-col>
                        <el-col :span="8">
                            <mi-input-number v-model="component.info.style.margin_bottom" controls-position="right" controls size="small" />
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="左右边距">
                    <el-row :gutter="10">
                        <el-col :span="16">
                            <el-slider v-model="component.info.style.margin_x" />
                        </el-col>
                        <el-col :span="8">
                            <mi-input-number v-model="component.info.style.margin_x" controls-position="right" controls size="small" />
                        </el-col>
                    </el-row>
                </el-form-item>
            </el-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script setup lang="ts">

import ArticleCateSelect from "@/views/site/components/ArticleCateSelect.vue";
import {inject, watch} from "vue";
import {articleLi} from "@/views/site/diy/diy";
import {getArticleList} from "@/api/site/cms";

const component : any = inject("selectedComponent")

if (!component.info.config || component.info.config == 0){
    component.info.config = {
        cate_id:0,
        num:2
    }
}

const cateChange = (id: number) => {
    const where = {
        cate_id: id,
        status:1,
        show_type: 1,
    }
    // 获取文章列表
    getArticleList({where:where}).then(({items}:{items:any[]}) => {
        console.log("article", items)
        let list = []
        if (items.length == 0){
            list = [{...articleLi}, {...articleLi}]
        }else{
            list = items
        }

        component.info.list = list
    })

}


</script>

<style scoped lang="scss">
.cms_box{
    font-size: 14px;
    padding: 10px;
    label{
        width: 80px; flex-shrink: 0;
    }
}
.style_box{
    padding: 10px;
    .el-input-number{
        width: 100% !important;
    }
    .el-row{
        width: 100%;
    }
}
</style>
